path: root/src/routes/user/[user]/+page.svelte

<script lang="ts">
	import { typeSchedule, type ParseResult } from '$lib/Hololive/hololive';
	import { user, type User } from '$lib/Data/AniList/user';
	import HeadTitle from '$lib/Home/HeadTitle.svelte';
	import Message from '$lib/Loading/Message.svelte';
	import { estimatedDayReading } from '$lib/Media/Manga/time';
	import Skeleton from '$lib/Loading/Skeleton.svelte';
	import root from '$lib/Utility/root.js';
	import locale from '$stores/locale.js';
	import { onMount } from 'svelte';
	import authorisedUsers from '$lib/Data/Static/authorised.json';
	import tooltip from '$lib/Tooltip/tooltip';
	import AnimeRateLimited from '$lib/Error/AnimeRateLimited.svelte';
	import identity from '$stores/identity';
	import SettingHint from '$lib/Settings/SettingHint.svelte';
	import proxy from '$lib/Utility/proxy';
	import { parseScheduleHtml } from '$lib/Data/hololive';
	import type { UserPreferences } from '$lib/Database/userPreferences.js';

	export let data;

	let userData: User | undefined = undefined;
	let error = false;
	let schedule: ParseResult | undefined = undefined;
	let preferences: UserPreferences | undefined = undefined;

	$: displayBadges = (username: string, badges: number | string) =>
		$locale({
			values: {
				badges: badges,
				username
			}
		}).user.profile.badges;

	onMount(() => {
		user(data.username, /^\d+$/.test(data.username))
			.then((profile) => (userData = profile))
			.catch(() => (error = true));
	});

	onMount(async () => {
		schedule = typeSchedule(
			parseScheduleHtml(
				await (
					await fetch(proxy('https://schedule.hololive.tv'), {
						headers: {
							Cookie: 'timezone=Asia/Tokyo'
						}
					})
				).text()
			)
		);
	});

	$: if (userData && userData.id === $identity.id) {
		fetch(root(`/api/preferences?id=${userData.id}`))
			.then((rawPreferences) => rawPreferences.json())
			.then((JSONpreferences) => (preferences = JSONpreferences));
	}

	// 8.5827814569536423841e0
</script>

<HeadTitle route={`${data.username}'s Profile`} path={`/user/${data.username}`} />

{#if error}
	<AnimeRateLimited>
		<a href={`https://anilist.co/user/${data.username}`} target="_blank">@{data.username}</a>'s
		profile could not be loaded.
	</AnimeRateLimited>
{:else}
	<div class={userData ? 'card card-small' : 'card'} id="user-panel">
		{#if userData === null}
			Could not load user profile for <a
				href={`https://anilist.co/user/${data.username}`}
				target="_blank">@{data.username}</a
			>.

			<p />

			Does this user exist?
		{:else if userData === undefined}
			<Message />

			<Skeleton card={false} count={1} height="224px" />
		{:else}
			<div
				class="card"
				id="user-grid"
				style={`background-image: ${
					userData ? `url(${userData.bannerImage})` : 'none'
				}; padding: 0;`}
			>
				{#if userData}
					<img src={userData.bannerImage} alt="" id="cover-image" />
				{/if}

				<div class="card" id="user-grid-content">
					<div id="user-grid-avatar">
						<a href={`https://anilist.co/user/${userData.name}`} target="_blank">
							<img src={userData.avatar.large} alt="" width="100vw" id="avatar" />
						</a>
					</div>

					<div id="user-grid-content-text">
						<p>
							<a
								href={`https://anilist.co/user/${userData.name}`}
								target="_blank"
								title={String(userData.id)}
								use:tooltip
							>
								@{userData.name}
							</a>
							{#if userData && authorisedUsers.includes(userData.id)}
								&#8204;
								<button class="unclickable-button button-badge badge-rainbow">Owner</button>
							{/if}
							<span class="click-item separator opaque">•</span>
							<a href={root(`/user/${userData.name}/badges`)}>Badge Wall</a>
						</p>

						{$locale({
							values: {
								username: data.username,
								anime: (userData.statistics.anime.minutesWatched / 60 / 24).toFixed(1),
								manga: estimatedDayReading(userData.statistics.manga.chaptersRead).toFixed(1)
							}
						}).user.profile.statistics}

						<p />

						{#await fetch(root(`/api/badges?id=${userData.id}`))}
							{displayBadges(userData.name, '...')}
						{:then badges}
							{#await badges.json()}
								{displayBadges(userData.name, '...')}
							{:then badges}
								{displayBadges(userData.name, badges.length)}
							{:catch}
								{displayBadges(userData.name, '?')}
							{/await}
						{:catch}
							{displayBadges(userData.name, '?')}
						{/await}
					</div>
				</div>
			</div>
		{/if}
	</div>

	{#if schedule && preferences && preferences.pinned_hololive_streams.length > 0}
		<p />

		<div class="card">
			<div class="hololive-badges">
				{#each preferences.pinned_hololive_streams as stream}
					{@const avatar = schedule.dict[stream]}

					{#if avatar}
						<a href={root(`/hololive/${encodeURIComponent(stream)}`)}>
							<img
								src={avatar}
								alt="Avatar"
								class="user-grid-hololive-badges"
								title={stream}
								use:tooltip
							/>
						</a>
					{/if}
				{/each}
			</div>
		</div>
	{/if}

	{#if preferences}
		<p />

		<details open>
			<summary>{$locale().user.preferences.title}</summary>

			<input
				type="checkbox"
				on:change={() => {
					if (userData)
						fetch(root(`/api/preferences?id=${userData.id}&toggleHideMissingBadges`), {
							method: 'PUT'
						});
				}}
				checked={preferences.hide_missing_badges}
			/>
			{$locale().user.preferences.hideMissingBadges.title}
			<SettingHint lineBreak>{$locale().user.preferences.hideMissingBadges.hint}</SettingHint>
		</details>
	{/if}
{/if}

<style lang="scss">
	#user-grid-content {
		display: flex;
		flex-wrap: wrap;
		column-gap: 1.5em;
		background-color: rgba(0, 0, 0, 0.468);
		color: #d8d8d8;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

	#user-grid-avatar {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	#avatar {
		border-radius: 8px;
	}

	.click-item {
		margin: 0 0.625rem;
	}

	#user-grid {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	#cover-image {
		visibility: hidden;
		height: 4.5em;
	}

	.user-grid-hololive-badges {
		$transitionDuration: 0.45s;
		$transition: transform $transitionDuration ease, box-shadow $transitionDuration ease;
		$size: 5.25em;

		border-radius: 8px;
		width: $size;
		height: $size;
		object-fit: cover;
		transition: $transition;
		box-shadow: rgba(0, 0, 11, 0.1) 0px 7px 29px 0px;

		&:hover {
			z-index: 2;
			transition: $transition;
			transform: scale(1.15);
			box-shadow: 0 1.5px 9px var(--base01), 0 0 0 4px var(--base02), 0 4px 30px var(--base01);
		}
	}

	.hololive-badges {
		display: flex;
		gap: 1rem;
		border-radius: 8px;
		justify-content: space-evenly;
	}

	.separator {
		color: var(--base04);
	}
</style>